
import React, { Component } from "react";
import { Col, Row, Tooltip,Table, Button, Divider, Alert, Progress, Badge, Rate, Typography, Select, Space, Tag,
  Popconfirm, message, Modal, Input, Form, Switch, Carousel, Image, Descriptions   } from 'antd';
import ReactEcharts from 'echarts-for-react';
import Cards from '../../../components/component/cards/cards';
import Breadcrumbs from "../../../components/component/Breadcrumb/breadcrumb";
import { CloseCircleOutlined, ClockCircleOutlined, CheckCircleOutlined, PlusCircleOutlined, EditOutlined, KeyOutlined,
  CrownOutlined, AccountBookOutlined, RetweetOutlined, PauseCircleOutlined, FileTextOutlined, PaperClipOutlined,
  ClearOutlined, AuditOutlined, SyncOutlined, SearchOutlined  } from '@ant-design/icons';
import styles from './infoManage.module.css'
import Slider from "react-slick";
import * as echarts from 'echarts'
import Marquee from 'react-fast-marquee';
import { dateFormaters, dateFormaterss }  from '../../../utils/utils'
// import { ProColumns } from '@ant-design/pro-table';
// import ProTable, { TableDropdown } from '@ant-design/pro-table';
const { Title } = Typography;
const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

// 轮播的配置
const settings = {
  dots: false, // 隐藏轮播小圆点
  infinite: true,
  slidesToShow: 4, // 展示5条内容
  slidesToScroll: 1,
  autoplay: true,
  vertical: true, // 垂直
  autoplaySpeed: 1500,
  pauseOnHover: false, // 鼠标悬浮不暂停
  arrows: false, // 隐藏翻页箭头
}

const contentStyle = {
  margin: 0,
  height: '460px',
  color: '#fff',
  textAlign: 'center',
  background: '#364d79',
};

const tableDatas = [
  {
    line: "大雁塔景区",
    station: '5星级',
    mile: 207.36,
    status: 63.9,
  },
  {
    line: "钟楼景区",
    station: '5星级',
    mile: 104.2,
    status: 27.3,
  },
  {
    line: "秦始皇兵马俑",
    station: '5星级',
    mile: 134.68,
    status: 28.93,
  },
  {
    line: "大唐不夜城步行街",
    station: '5星级',
    mile: 101.21,
    status: 15.92,
  },
  {
    line: "西安城墙",
    station: '5星级',
    mile: 85.61,
    status: 14.8,
  },
  {
    line: "华清池演出",
    station: '5星级',
    mile: 78.18,
    status: 14.69,
  },
  {
    line: "大唐芙蓉园",
    station: '5星级',
    mile: 51.02,
    status: 12.03,
  },
  {
      line: "回民街",
      station: '5星级',
      mile: 51.27,
      status: 10.24,
  },
  {
    line: "西安世博园",
    station: '4星级',
    mile: 31.27,
    status: 9.01,
  },
  {
    line: "曲江池寒窑景区",
    station: '4星级',
    mile: 29.27,
    status: 11.41,
  },
  {
    line: "小雁塔景区",
    station: '4星级',
    mile: 19.27,
    status: 9.07,
  },  
  {
    line: "碑林博物馆",
    station: '3星级',
    mile: 20.27,
    status: 7.07,
  },
  {
    line: "陕西省历史博物馆",
    station: '5星级',
    mile: 29.27,
    status: 14.25,
  },                                         
]

let dataee = [
  {
    key: '1',
    name: '政府洪涝灾害专项资金',
    count: 58,
    status: 'resolve',
    unit: '亿元',
    statuser: 'success',
    institution: '民政局管辖',
    source: '财政局拨款',
    business:'西安红河雨具生产有限责任公司',
    annex:'洪涝灾害专项资金028905CCC755号文件.xls',
    approver:'李强飞',
    createTime:'2021-10-24 18:02:36',
    startTime:'2023-05-24 17:02:21',
    endTime:'2026-12-04 18:00:30',
  },
  {
    key: '2',
    name: '西咸新区沣西新城地铁项目动工及赔偿资金',
    count: 241,
    status: 'resolve',
    unit: '亿元',
    statuser: 'error',
    institution: '城建局',
    source: '国家发改委(地铁管理办公室)',
    business:'中铁十二局西安分公司',
    annex:'地铁项目国家审批ZP号008文件.pdf',
    approver:'刘海通',
    createTime:'2022-08-20 11:22:36',
    startTime:'2023-07-01 09:00:00',
    endTime:'2025-11-31 18:00:30',
  },
  {
    key: '3',
    name: '唐延路绿林建设项目修正资金',
    count: 18,
    status: 'pending',
    unit: '亿元',
    statuser: 'success',
    institution: '环境保护管理局',
    source: '财政局拨款',
    business:'西安爱家苗木值林劳务管理有限公司',
    annex:'西安市园林绿化专项资金审批表.xls',
    approver:'刘果',
    createTime:'2022-04-19 16:12:37',
    startTime:'2022-12-01 09:00:00',
    endTime:'2025-09-15 17:30:30',
  },
  {
    key: '4',
    name: '双府社区基建修补资金',
    count: 3.2,
    status: 'resolve',
    unit: '亿元',
    statuser: 'success',
    institution: '城建局',
    source: '财政局拨款',
    business:'西安九孔城建有限公司',
    annex:'莲湖区双府街道办资金审批文件.xls',
    approver:'刘海通',
    createTime:'2022-09-20 11:22:36',
    startTime:'2023-08-12 09:00:00',
    endTime:'2027-01-21 18:30:33',
  },
  {
    key: '5',
    name: '西二环扩建辅路大修资金(修订版)',
    count: 10.6,
    status: 'reject',
    unit: '亿元',
    statuser: 'success',
    institution: '城建规划局',
    source: '西安市财政局拨款',
    business:'中铁三局5部基建',
    annex:'国家十四五规划道路桥梁规划审批P028文件.xls',
    reason:'审批金额过大，国家审批局审批未通过，尝试重申，查看审批意见',
    approver:'刘海通',
    opinion:'本次申请审批，未通过最新一版(0229)道路桥梁规划指导纲要，金额数量需更加精细规划和呈现',
    createTime:'2022-11-20 13:27:58',
    startTime:'2022-12-12 09:30:00',
    endTime:'2026-05-20 16:35:50',
  },  
  {
    key: '6',
    name: '南三环南二环辅路架桥辅路基础建设',
    count: 6.2,
    status: 'resolve',
    unit: '亿元',
    statuser: 'error',
    institution: '城建规划局',
    source: '财政局专项',
    business:'中铁十六局建设',
    annex:'国家十四五规划道路规划2022修订',
    approver:'刘福',
    createTime:'2022-11-20 13:27:58'
  },   
]

export default class extends Component {
  timer = null;
  currentIndex = 0;
  lastIndex = 0;
  constructor(props) {
    super(props);
    this.state = {
      noticeInfo:`由于服务器扩容和升级原因，运营中心后台管理系统将于${dateFormaters("YYYY-mm-dd HH:MM:SS",new Date())}进行升级停服，将于${dateFormaterss("YYYY-mm-dd HH:MM:SS",new Date())}恢复提供服务，升级期间给用户带来的不便还请谅解!感谢您的支持!`,
      opsData:[
        { value: 150.8, name: '旅游及消费品收入' },
        { value: 263.0, name: '工业及产品收入' },
        { value: 148.7, name: '固定资产及投资值' },
        { value: 226.9, name: '高新技术产业产值' },
        { value: 126.9, name: '航天航空制造' },
        { value: 196.8, name: '物流及快递产业收入' },
        { value: 100.8, name: '食品和生物医药' }
      ],
      lightData:{
        name: '旅游及消费品收入',
        value: 150.8
      }, 
      cardData:{
        refType:'dom',   
        visible:false,    
        topData:{
            title:'旅游总收入额',
            icon:'￥',
            count:8480,
            unit:'元',
        },
        contentData:{
            week:'周同比',
            weekData:13,
            weekFlag:'up',
            month:'月同比',
            monthData:12,
            monthFlag:'down',
        },
        bottomData:{
            title:'旅游日收入',
            count:2574,
            unit:'元',
        }
      },
      columns: [
        {
          title: '资金项目名称',
          dataIndex: 'name',
          width:268,
          ellipsis: true,
          render:(_,record) => <a onClick={()=>{this.goDetial(record)}}>{record.name}</a>
        },
        {
          title: '金额',
          dataIndex: 'count',
          sorter: {
            compare: (a, b) => a.count - b.count,
            multiple: 3,
          },
        },
        {
          title: '单位',
          dataIndex: 'unit',
        },
        {
          title: '资金状态',
          dataIndex: 'statuser',
          render: (_, record) => {
            return this.getStatuser(record.statuser)
         }  
        },
        {
          title: '归属管制单位',
          dataIndex: 'institution',
          ellipsis: true,
        },
        {
          title: '资金来源',
          dataIndex: 'source',
          ellipsis: true,
        },
        {
          title: '关联企业',
          dataIndex: 'business',
          width:260,
          ellipsis: true,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width:208,
        },
        {
          title: '状态',
          dataIndex: 'status',
          render: (_, record) => {
             return this.getStatus(record.status)
          }          
        },        
        {
          title: '操作',
          key: 'action',
          width: 230,
          render: (_, record) => {
            return(
              <Space size="small">
              <a style={{marginRight:1}} onClick={ ()=>{this.getDetial(record)} }>详情</a>
              <a style={{marginRight:1}} onClick={()=>{this.opens()}}>审批</a>
              <a style={{marginRight:1}} onClick={()=>{this.getData()}}>启用</a>
              <a style={{marginRight:1, color:'red'}} onClick={()=>{this.getData()}}>停用</a>
              <Popconfirm
                title="确定删除当前数据吗？"
                onConfirm={this.confirms}
                onCancel={this.cancels}
                okText="确定"
                cancelText="取消"
              >
                <a style={{color:'#f14c4c'}}>删除</a>
              </Popconfirm> 
            </Space>
            )
            },
        },
      ],       
      cardDatas:{
        refType:'dom',
        topData:{
            title:'主城区工业收入',
            icon:'￥',
            count:52.5,
            unit:'亿元',
        },
        contentData:{
            week:'月同比',
            weekData:2,
            weekFlag:'up',
            month:'年同比',
            monthData:8,
            monthFlag:'up',
        },
        bottomData:{
            title:'上月工业生产产值',
            count:9.58,
            unit:'亿元',
        }
      },
      cardDatass:{
        refType:'dom',
        topData:{
            title:'税务总收入(税收)',
            icon:'￥',
            count:154.77,
            unit:'亿元',
        },
        contentData:{
            week:'月同比',
            weekData:0.12,
            weekFlag:'down',
            month:'年同比',
            monthData:0.3,
            monthFlag:'up',
        },
        bottomData:{
            title:'上年收入税收收入',
            count:142.38,
            unit:'亿元',
        }
      },
      cardDatasss:{
        refType:'dom',
        topData:{
            title:'城建及固定资产投资',
            icon:'￥',
            count:81.28,
            unit:'亿元',
        },
        contentData:{
            week:'月同比',
            weekData:0.4,
            weekFlag:'down',
            month:'年同比',
            monthData:0.71,
            monthFlag:'down',
        },
        bottomData:{
            title:'去年固定资产投资',
            count:80.30,
            unit:'亿元',
        }
      },
      loading:false,
      total:15,
      addOpen:false,
      tableData: [],
      detailOpen:false,
      detailInfo:{},
      filterValue:''      
    };
  }

  componentDidMount() {
      this.getData();
      this.getOption();
      window.scrollTo(0, 0);
  }

  componentDidUpdate() {
    
  }  

  confirms = () => {
    message.success('数据删除成功!');
    this.getData();
  };
  
  cancels = () => {
  };

  opens =()=>{
    this.setState({visible:true})
  }

  filterChange = (e) =>{
    this.setState({filterValue:e.target.value})
  }

  handleOk = () => {
    this.setState({visible:false},()=>{
      message.success('数据审批成功!');
      this.getData();
    })
  }

  handleOks = () => {
    let dataes = dataee;
    dataes.push({
      key: Math.floor(Math.random()*10000000),
      name: '十四五规划基础设施建设基础路面建设',
      count: Math.floor(Math.random())*100,
      status: 'resolve',
      unit: '亿元',
      institution: '国建局',
      source: '财政局拨款',
      business:'西安陕煤集团子公司陕煤建设',
      annex:'洪涝灾害专项资金YT98547555号文件.xls',
      approver:'张宇国',
      createTime:'2022-09-20 11:12:18'
    })
    this.setState({addOpen:false,tableData:dataes},()=>{
      message.success('数据添加成功!');
      this.getData();
    })
  }

  handleCancel = () => {
    this.setState({visible:false})
  }

  getData = () =>{
    this.setState({
      loading: true,
    });
    setTimeout(() => {
      this.setState({
        loading: false,
        tableData:dataee
      });    
    }, 500);
  }

  getStatus = (status) => {
      if(status =='reject'){
          return(
              <Tag color="#ff4d4f"><CloseCircleOutlined /> 审批失败</Tag>
          )
      }else if(status =='pending'){
        return(
              <Tag color="#2db7f5"><ClockCircleOutlined /> 审评中...</Tag>
          )
      }else if(status =='resolve'){
        return(
              <Tag color="#87d068"><CheckCircleOutlined /> 审批成功</Tag>
          )
      }
  }

  getStatuser = (status) => {
    if(status === 'success'){
        return(
          <Badge status="success" text="成功" />
        )
    }else{
      return(
        <Badge status="error" text="失败" />
        )
    }
  }

  onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
  }

  goDetial(item){
    this.props.history.push(
      {
        pathname:'/infoDetail',
        query:{
            info: item
        }
      })
  }

  getDetial = (row) =>{
      this.setState({detailOpen:true,detailInfo:row});
  }

  detailOk = () => {
    this.setState({detailOpen:false},()=>{
      
    });
  }

  getOption = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('industryCharts'));   
    myChart.setOption({
      color:[ '#4962FC', '#73c0de','#fc8452', '#9a60b4', '#01C2F9','#13c2c2','#52c41a'],
      title: {
        text: '西安市支柱产业产值及占比',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          //console.log(JSON.stringify(params.data.value[2]));
          return params.data.name + "<br/>" + params.data.value + "亿元";
        }
      },
      series: [
        {
          name: '产值',
          type: 'pie',
          radius: '50%',
          data: this.state.opsData,
          label:{
            formatter:function(data){
              return `${data.name} ${data.value}亿元 
                占比${data.percent.toFixed(1)}%`
            }    
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              normal:{ 
                label:{ 
                    show: true, 
                    //formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
                    formatter: '{d}%' //只要百分比
                }, 
                labelLine :{show:true} 
              }
            }
          }
        }
      ]
    });
    this.timer = setInterval( () =>{ 
      this.setState({
        lightData:{
            name: this.state.opsData[this.currentIndex].name,
            value: this.state.opsData[this.currentIndex].value
        }
      });                
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: this.lastIndex
      });

      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: this.currentIndex
      });
      this.lastIndex = this.currentIndex;
      ++this.currentIndex;
      if (this.currentIndex > 6) {
        this.currentIndex = 0;
      }
    }, 1000);    
  }

  getOptions = () => {
    return {
      color: ['#75bedc', '#fc8251'],
      tooltip: {
        trigger: 'none',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {},
      grid: {
        top: 70,
        bottom: 50
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#fc8251'
            }
          },
          axisLabel: {interval: 1},
          axisPointer: {
            label: {
              formatter: function (params) {
                return (
                  '市政财政收入' +
                  params.value +
                  (params.seriesData.length ? '：' + params.seriesData[0].data+'亿元' : '')
                );
              }
            }
          },
          // prettier-ignore
          data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9', '2021-10', '2021-11', '2021-12']
        },
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#75bedc'
            }
          },
          axisLabel: {interval: 1},
          axisPointer: {
            label: {
              formatter: function (params) {
                return (
                  '市政财政收入  ' +
                  params.value +
                  (params.seriesData.length ? '：' + params.seriesData[0].data+'亿元' : '')
                );
              }
            }
          },
          // prettier-ignore
          data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8', '2020-9', '2020-10', '2020-11', '2020-12']
        }
      ],
      yAxis: [
        {
          type: 'value',
          name:'金额(亿元)'
        }
      ],
      series: [
        {
          name: '市政财政收入金额(2020)',
          type: 'line',
          xAxisIndex: 1,
          smooth: true,
          emphasis: {
            focus: 'series'
          },
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 7.7, 15.6, 32.2, 28.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: '市财政收入金额(2021)',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series'
          },
          data: [
            3.9, 5.9, 11.1, 18.7, 48.3, 21.2, 31.6, 26.6, 35.4, 18.4, 10.3, 0.7
          ]
        }
      ]
    }
  }

  getOptionss = () => {
    return {
      color:['#01C2F9'],
      title: {
        text: '物流及货物出口量(吨)',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
      }, 
      xAxis: {
        type: 'category',
        splitLine: { show: true },
        data: ['1月', '2月', '3月', '4月','5月','6月','7月','8月','9月','10月','11月','12月',],
      },
      yAxis: {
        type: 'value',
        name:'吨数(吨)'
      },
      series: [
        {
          data: [26, 19, 60, 49, 57, 62, 39, 109, 114, 102, 95, 88],
          type: 'bar',
          barWidth:30,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
  }
  onChartLegendselectchanged(param,echarts){
    console.log(param)
  }

  switchOnChange = (checked) => {
    console.log(`switch to ${checked}`);
  };

  onChartClick = (param,echarts) =>{
    console.log(param)
  } 

  addData = (checked) => {
    this.setState({addOpen:true});
    console.log(`switch to ${checked}`);
  };

  onChangeSwiper = (currentSlide) => {
    console.log(currentSlide);
  };

  render() {
    const { cardData, cardDatas, cardDatass, cardDatasss, noticeInfo, total, loading, columns, tableData, visible, addOpen,
            detailOpen, detailInfo, filterValue } = this.state;
    const { history } = this.props;
    console.log('ffffffffffff',history);
    let onEvents={
      'click': this.onChartClick.bind(this),
      'legendselectchanged': this.onChartLegendselectchanged.bind(this)
    }
    return (
      <>
        <Alert
            banner
            closable
            message={
              <Marquee pauseOnHover gradient={false}>
                {noticeInfo}
              </Marquee>
            }
          />      
        <div style={{marginLeft:0}}>
            <Breadcrumbs props={this.props}></Breadcrumbs>
        </div>
        <Divider />  
        <div style={{margin:20}}>
          <div style={{marginTop:20,marginBottom:20}}>
            <Carousel afterChange={this.onChangeSwiper} autoplay>
                <div>
                  <h3 style={contentStyle}>
                    <Image
                        preview={true}
                        style={{width:1660,height:460}}
                        src='https://mdn.alipayobjects.com/huamei_aqtubz/afts/img/A*tmQdRqU2J0AAAAAAAAAAAAAADpB7AQ/original'
                    /> 
                  </h3>
                </div>
                <div>
                  <h3 style={contentStyle}>
                    <Image
                        preview={true}
                        style={{width:1660,height:460}}
                        src='https://t.alipayobjects.com/images/T1GDtfXeRcXXXXXXXX.png'
                    /> 
                  </h3>
                </div>
                <div>
                  <h3 style={contentStyle}>
                    <Image
                        preview={true}
                        style={{width:1660,height:460}}
                        src='https://img2.baidu.com/it/u=1248069401,1748359542&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
                    /> 
                  </h3>
                </div>
                <div>
                  <h3 style={contentStyle}>
                    <Image 
                        preview={true}
                        style={{width:1660,height:460}}
                        src='https://img.alicdn.com/imgextra/i1/O1CN01rfm0mg1Yp3KurJgl4_!!6000000003107-0-tps-1920-876.jpg'
                    /> 
                  </h3>
                </div>                
            </Carousel>            
          </div>
          <div>
            <Row gutter={24}>
              <Col {...topColResponsiveProps}>
                  <Cards card ={cardData}></Cards>
              </Col> 
              <Col {...topColResponsiveProps}>
                <Badge.Ribbon color="cyan" text="基础">
                  <Cards card ={cardDatas}></Cards>
                </Badge.Ribbon>
              </Col> 
              <Col {...topColResponsiveProps}>
                <Badge.Ribbon color="green" text="先进">
                  <Cards card ={cardDatass}></Cards>

                </Badge.Ribbon>
              </Col>
              <Col {...topColResponsiveProps} >
                <Badge.Ribbon color="red" text="滞后">
                  <Cards card ={cardDatasss}></Cards>
                </Badge.Ribbon>
              </Col>            
            </Row>
          </div>
          <Divider />
          <div>
              <div style={{display:'flex'}}>
                  <div style={{margin:10}}>
                    <div id="industryCharts" style={{width:524,height:302}}></div>
                  </div>
                  <div style={{margin:10}}>
                    <ReactEcharts
                        option={this.getOptions()} 
                        notMerge={true}
                        lazyUpdate={true}
                        onEvents={onEvents}
                        style={{width:524,height:302}}
                    /> 
                  </div>
                  <div style={{margin:10,overflow:"hidden"}}>
                    <div className={styles.tables} >
                      <div className={styles.header}>
                          <div className={styles.tableTd}>排名</div>                      
                          <div className={styles.tableTd}>景区名称</div>
                          <div className={styles.tableTd}>星级</div>
                          <div className={styles.tableTd}>接待游客</div>
                          <div className={styles.tableTd}>旅游收入</div>
                      </div>
                      <div className={styles.tableBody} >
                        <Slider {...settings}>
                          {tableDatas.map((item, index) => {
                          return (
                              <div className={styles.tableBodyTr} key={index}>        
                                <div className={styles.tableTd1} style={{width:115}} title={index+1} >
                                  {
                                    index == 0 ? <span><CrownOutlined style={{color:'#ffc069',fontSize:18,marginLeft:-23}} /> {index+1}</span>:<span> {index+1}</span>
                                  }
                                </div>                                                  
                                <div className={styles.tableTd1} title={item.line}>
                                    {item.line}
                                </div>
                                <div className={styles.tableTd1} title={item.station}>
                                    {item.station}
                                </div>
                                <div className={styles.tableTd1} title={item.mile}  >
                                    {item.mile} (万人次)
                                </div>
                                <div className={styles.tableTd1} title={item.status} >
                                    {item.status} (亿元)
                                </div> 
                              </div>
                            );
                          })}
                        </Slider>
                      </div>                      
                    </div>
                  </div>     
             
              </div>            
          </div>
          <Divider />
          <div>
            <Title  style={{marginLeft:26}} level={4}><AccountBookOutlined /> 西安市流动投资资金列表</Title>
              <div style={{margin:28}}>
                <Button style={{marginRight:10}} onClick={this.addData} type="primary"><PlusCircleOutlined /> 新增资金数据</Button>
                <Button style={{marginRight:10}} onClick={ ()=>{this.getData()} } type="primary" ><EditOutlined /> 修改资金状态</Button>
                <Button style={{marginRight:10}} onClick={ ()=>{this.getData()} } ><RetweetOutlined /> 同步下发资金</Button>
                <Button style={{marginRight:10}} onClick={ ()=>{this.getData()} } type="primary" ><PauseCircleOutlined /> 启用状态</Button>
                <Button style={{marginRight:10}} onClick={ ()=>{this.getData()} } type="primary" danger><CloseCircleOutlined /> 停用状态</Button>
                <Button style={{marginRight:10}} onClick={ ()=>{this.getData()} } ><SyncOutlined /> 重置状态</Button>
                <span style={{marginRight:20,float:'right'}}>
                  关键字: <Input value={filterValue} onChange={this.filterChange} style={{width:200,marginLeft:5}} allowClear={true} placeholder="请输入企业名称回车搜索" />
                  <Button style={{marginRight:10,marginLeft:15}} onClick={ ()=>{this.getData()} } type="primary" ><SearchOutlined /> 搜索</Button>
                </span>
              </div>
              <Table style={{margin:30}} columns={columns} dataSource={tableData}                       
                      onChange={this.onChange}                       
                      loading={loading}
                      size="small"
                      pagination={{
                        pageSize:5, 
                        total:{total},
                        showTotal:(total) => `共 ${total} 个`,
                      }}/>
          </div>
        </div>
        <Modal title="资金数据审批" visible={visible} onOk={this.handleOk} onCancel={()=>{this.setState({visible:false})}}>
              <div>
                <Form
                  name="basic"
                  labelCol={{
                    span: 6,
                  }}
                  wrapperCol={{
                    span: 18,
                  }}
                  initialValues={{
                    gdp: '',
                    gdpNum: '',
                    upRate: '',
                  }}
                  onFinish={this.onFinish}
                  autoComplete="off"
                >
                  <Form.Item
                    label="是否同意"
                    name="upRate"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Switch checkedChildren="同意" unCheckedChildren="驳回" onChange={this.switchOnChange} defaultChecked />
                  </Form.Item>                    
                  <Form.Item
                    label="审批意见"
                    name="gdp"
                    rules={[
                      {
                        required: true,
                        message: '请输入审批意见!',
                      },
                    ]}
                  >
                    <Input style={{width:266}} />
                  </Form.Item>

                  <Form.Item
                    label="备注"
                    name="gdpNum"
                  >
                    <Input style={{width:266}} />
                  </Form.Item>                
                </Form>                  
              </div>
        </Modal>
        <Modal title="新增资金数据" open={addOpen} onOk={this.handleOks} onCancel={()=>{this.setState({addOpen:false})}}>
            <div>
              <Form
                name="basic"
                labelCol={{
                  span: 6,
                }}
                wrapperCol={{
                  span: 18,
                }}
                initialValues={{
                  gdp: '',
                  gdpNum: '',
                  upRate: '',
                }}
                onFinish={this.onFinish}
                autoComplete="off"
              >                    
                <Form.Item
                  label="资金名称"
                  name="name"
                  rules={[
                    {
                      required: true,
                      message: '请输入资金名称!',
                    },
                  ]}
                >
                  <Input                           
                    style={{
                      width: 220,
                    }} />
                </Form.Item>
                <Form.Item
                  label="资金金额"
                  name="count"
                  rules={[
                    {
                      required: true,
                      message: '请输入资金金额!',
                    },
                  ]}
                >
                  <Input                           
                    style={{
                      width: 220,
                    }} />
                </Form.Item>
                <Form.Item
                  label="管制单位"
                  name="unit"
                  rules={[
                    {
                      required: true,
                      message: '请选择管制单位!',
                    },
                  ]}
                >
                  <Select
                    style={{
                      width: 220,
                    }}
                    options={[
                      {
                        value: '民政局',
                        label: '民政局',
                      },
                      {
                        value: '城建局',
                        label: '城建局',
                      },
                      {
                        value: '环保局',
                        disabled: true,
                        label: '环保局',
                      },
                      {
                        value: '城市规划局',
                        label: '城市规划局',
                      },
                      {
                        value: '城管局',
                        label: '城管局',
                      },                      
                    ]}
                  />
                </Form.Item>  
                <Form.Item
                  label="状态"
                  name="upRate"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={this.switchOnChange} defaultChecked={true} />
                </Form.Item>                              
              </Form>                  
            </div>
        </Modal>
        <Modal title="资金详细信息" width={866} height={666} open={detailOpen} onOk={this.detailOk} onCancel={()=>{this.setState({detailOpen:false})}}>
          <h3 style={{margin:'10px 0',paddingBottom:3,borderBottom:'1px solid #ddd'}}><a><FileTextOutlined style={{fontSize:20}} /></a> {detailInfo.name+'信息'}</h3>
          <Descriptions layout="horizontal">
            <Descriptions.Item label="资金名称" span={2}>{detailInfo.name}</Descriptions.Item>
            <Descriptions.Item label="金额(亿)" span={1}><Badge showZero color="#faad14" count={detailInfo.count+'亿'} /> </Descriptions.Item>
            <Descriptions.Item label="资金使用状态"  span={3}>
              <Badge status={detailInfo.statuser} text={detailInfo.statuser} />
            </Descriptions.Item>
            <Descriptions.Item label="资金来源" >
              {detailInfo.source}  
            </Descriptions.Item>
            <Descriptions.Item label="归属管制单位" span={2}>{detailInfo.institution}</Descriptions.Item>
          </Descriptions>
          <h3 style={{margin:'10px 0',paddingBottom:3,borderBottom:'1px solid #ddd'}}><a><AuditOutlined style={{fontSize:20}} /></a> {'招标信息'}</h3>
          <Descriptions layout="horizontal">
            <Descriptions.Item label="落地项目名称" span={3}>{detailInfo.name+'专项资金'}</Descriptions.Item>
            <Descriptions.Item label="项目开始时间">{detailInfo.startTime}</Descriptions.Item>
            <Descriptions.Item label="项目完成时间" span={2}>{detailInfo.endTime}</Descriptions.Item>
            <Descriptions.Item label="项目负责人">吴战国</Descriptions.Item>            
            <Descriptions.Item label="工程招投标号" span={2}>IGF:008SDe84g9s420230123M0096MT</Descriptions.Item>            
            <Descriptions.Item label="招投标文件" span={3}><a><PaperClipOutlined />大西安发展十四五统筹城市发展规划书(2023修订版)</a></Descriptions.Item>            
            <Descriptions.Item label="工程建设承建公司" span={2}>陕建一局十二部</Descriptions.Item>   
            <Descriptions.Item label="工程建设进度" span={1}><Progress percent={detailInfo.count} size="small" /></Descriptions.Item>   
          </Descriptions>
          <h3 style={{margin:'10px 0',paddingBottom:3,borderBottom:'1px solid #ddd'}}><a><ClearOutlined style={{fontSize:20}} /></a> {'项目设计信息'}</h3>
          <Descriptions layout="horizontal">
            <Descriptions.Item label="项目建筑面积" span={1}>362350㎡</Descriptions.Item>
            <Descriptions.Item label="建筑高度" span={1}>498m</Descriptions.Item>
            <Descriptions.Item label="层数" span={1}>98层</Descriptions.Item>
            <Descriptions.Item label="总投资" span={1}>103亿</Descriptions.Item>            
            <Descriptions.Item label="竣工时间" span={2}>2024年12月</Descriptions.Item>            
            <Descriptions.Item label="项目商业属性" span={3}><a>五星级酒店、5A甲级写字楼、漫步云端观光层、会议中心、高端商业等</a></Descriptions.Item>            
            <Descriptions.Item label="项目位置" span={3}>位于西安市长安区沣东大道协同创新港东北侧约160米处</Descriptions.Item>   
            <Descriptions.Item label="项目设计理念" span={3}>塔楼设计理念源于大雁塔和骊山秦始皇陵，源自大雁塔、骊山阶梯与兵马俑铠甲，大堂设计仿照西安城门，雨棚设计出自透明丝绸，整体形象与古城西安的历史文化相呼应。建筑平面设计源自华夏司南，结构整体形似一个十字巨柱，寓意项目处于十字路口，必将成为一个崭新的世界中心</Descriptions.Item>   
          </Descriptions>
        </Modal>         
      </>
    )
    }
}
